<template>
  <div class="app">
    <van-sticky>
      <van-nav-bar
        title="咨询记录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <div id="main">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <vxe-table v-if="!loading" border="inner" size="mini" :data="data">
            <vxe-column type="seq" width="15"></vxe-column>
            <vxe-column :field="'counselorName'" :title="'咨询师'" />
            <vxe-column :field="'date'" :title="'预约日期'" />
            <vxe-column :field="'startTime'" :title="'开始时间'" />
            <vxe-column :field="'endTime'" :title="'结束时间'" />
            <vxe-column :field="'action'" width="60">
              <template #default="{ row }">
                <van-button
                  size="mini"
                  type="primary"
                  @click="handleClick(row)"
                >
                  查看
                </van-button>
              </template>
            </vxe-column>
          </vxe-table>
        </van-list>
      </van-pull-refresh> -->
    </div>
    <Table :header="header" :url="url" @toClick="handleClick">
      <van-button size="mini" type="primary" @click="handleClick(row)">
        查看
      </van-button>
    </Table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch, Ref } from 'vue'
import { useRouter } from 'vue-router'
import { getServiceRecord } from '/@/views/reserve/api'
import Table from '/@/views/reserve/components/table.vue'

export default defineComponent({
  components: {
    Table,
  },
  setup() {
    const router = useRouter()

    let data: any = reactive([])
    const onClickLeft = () => {
      router.push({
        name: 'Me',
      })
    }

    let header = {
      name: 'counselorName',
      nameKey: '咨询师',
      dateKey: '咨询时间',
      date: 'date',
      startKey: '开始时间',
      startTime: 'startTime',
      endKey: '结束时间',
      endTime: 'endTime',
    }

    let url = '/api/blade-appointment/advisory/records/list'

    let current = ref(1)

    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)

    const onLoad = () => {
      setTimeout(async () => {
        if (refreshing.value) {
          refreshing.value = false
        }

        const list = await useList(current)
        current.value++
        list.forEach((item: any) => {
          data.push(item)
        })
        console.log(list)
        loading.value = false

        if (list.length == 0) {
          finished.value = true
        }
      }, 1000)
    }

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      onLoad()
    }

    return {
      onClickLeft,
      data,
      handleClick(row: any) {
        let query = {
          id: row.id,
          date: row.date,
          startTime: row.startTime,
          endTime: row.endTime,
          userName: row.userName,
          userId: row.userId,
          appointmentReceiveCode: row.appointmentReceiveCode,
          advisoryReportEntityList: JSON.stringify(
            row.advisoryReportEntityList
          ),
          advisoryFeedbackEntityList: JSON.stringify(
            row.advisoryFeedbackEntityList
          ),
          counselorName: row.counselorName,
        }
        router.push({
          name: 'ReserveReport',
          query: {
            ...query,
          },
        })
      },
      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing,
      header,
      url,
    }
  },
})

async function useList(current: Ref<number>) {
  let list: any[] = []
  await getServiceRecord(current.value, 20).then((res) => {
    list = res.data.data.records
    list.map((item: Record<string, any>) => {
      item.date = item.startTime.substring(0, 10)
      item.startTime = item.startTime.substring(11, 16)
      item.endTime = item.endTime.substring(11, 16)
    })
  })

  return list
}
</script>

<style lang="less" scoped></style>
